import React from 'react';
import {NavLink, useNavigate} from "react-router-dom";
import {LOGIN_PATHNAME} from "../constants";
import {UserOutlined} from '@ant-design/icons'
import {Button, message} from "antd";
import {removeToken} from "../utils/user-token";
import {useDispatch} from "react-redux";
import {loginOutReducer} from "../redux/userReducer";
import useGetUserInfo from "../hooks/useGetUserInfo";

const UserInfo: React.FC = () => {
    // const {data = {}} = useRequest(getUserInfoService)
    // const {nickname, username} = data
    const {nickname, username} = useGetUserInfo()
    const dispatch = useDispatch()
    const nav = useNavigate()
    const loginOut = () => {
        dispatch(loginOutReducer())

        removeToken()
        nav(LOGIN_PATHNAME)
        message.success("退出成功")
    }
    const UserInfo = (
        <>
      <span style={{color: '#fff'}}>
        <UserOutlined/>
          {nickname}
      </span>
            <span>
        <Button type={'link'} onClick={loginOut}>退出</Button>
      </span>
        </>
    )
    const login = (
        <NavLink to={LOGIN_PATHNAME}>登录</NavLink>
    )
    return (
        <div>
            {username ? UserInfo : login}
        </div>
    );
};

export default UserInfo;
